<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>SEVENTEEN</title>
  <link rel="stylesheet" href="./css/font-awesome-4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="./js/swiper/swiper.min.css" />
  <link rel="stylesheet" href="./css/animation.css">
  <link rel="stylesheet" href="./css/reset.css" />
  <link rel="stylesheet" href="./css/style.css" />
  <script src="./js/swiper/swiper.min.js"></script>
</head>

<body>
  <!-- Header -->
  <header class="header up-move-down">
    <div class="container">
      <a href="index.html" class="logo">
        <img src="./images/logo.png" alt="SEVENTEEN" />
      </a>

      <nav class="main-nav">
        <ul class="top">
          <li><input type="text" placeholder="输入查找项..."></li>
          <li><a href="#"><i class="fa fa-search"></i></a></li>
        </ul>
        <ul class="bottom">
          <li><a href="index.html" class="active">首页</a></li>
          <li>
            <a href="detail.html">关于</a>
            <ul class="menu-2 bown-move-up">
              <li><a href="news.html">相关新闻</a></li>
              <li><a href="dynamic.html">近期动态</a></li>
            </ul>
          </li>
          <li><a href="news.html">相关新闻</a></li>
          <li><a href="dynamic.html">近期动态</a></li>
          <li><a href="#">联系我们</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <!-- banner -->
  <section class="banner">
    <div class="swiper bannerSwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide bannerItem">
          <img class="wh-full" src="./images/banner.png">
        </div>
      </div>
    </div>
    <div class="banner-title lw">
      <h1 class="animate-down-move-up">一起成为彼此青春里最耀眼的光</h1>
      <div class="btn animate-down-move-up">
        <a href="detail.html">了解更多</a>
      </div>
    </div>
  </section>

  <!-- qsr -->
  <section class="qsr">
    <div class="lw">
      <h1 class="animate-down-move-up">权顺荣（권순영，Kwon Soon Young），主舞、PERFORMANCE TEAM队长</h1>
      <div class="qsr-content">
        <div class="qsr-msg">
          <p class="animate-left-move-right">“因为有引导的人，才有被引导的人；因为有被引导的人，才有引导的人；因为有光明才有黑暗”</p>
          <img class="qsr-signature animate-right-move-left" src="./images/singnature.png" alt="">
        </div>
        <img class="qsr-img animate-right-move-left" src="./images/qsr.png" alt="">
      </div>
    </div>
  </section>

  <!-- dynamic -->
  <section class="dynamic">
    <h1 class="lw animate-down-move-up">近期动态</h1>
    <p class="lw animate-down-move-up">权顺荣（권순영，Kwon Soon Young）的近期动态</p>
    <div class="swiper educationSwiper lw animate-down-move-up">
      <div class="swiper-wrapper">
        <div class="swiper-slide educationItem">
          <img class="wh-full" src="./images/dt1.jpg">
          <p class="animate-down-move-up">Exclusive: SEVENTEEN's HOSHI is Ready for You To Step Into His Web with Solo Mixtape "Spider"</p>
        </div>
        <div class="swiper-slide educationItem">
          <img class="wh-full" src="./images/dt2.jpg">
          <p class="animate-down-move-up">顺荣捐赠天使</p>
        </div>
        <div class="swiper-slide educationItem">
          <img class="wh-full" src="./images/dt3.jpg">
          <p class="animate-down-move-up">顺荣捐赠天使</p>
        </div>
        <div class="swiper-slide educationItem">
          <img class="wh-full" src="./images/dt4.jpg">
          <p class="animate-down-move-up">顺荣捐赠天使</p>
        </div>
      </div>
      <div class="swiper-button-next educationSwiper-next"></div>
      <div class="swiper-button-prev educationSwiper-prev"></div>
    </div>
    <div class="lw">
      <div class="readMore  animate-down-move-up">
        <a href="dynamic.html">Read More</a>
      </div>
    </div>
  </section>

  <!-- News -->
  <section class="news">
    <div class="title lw animate-down-move-up">
      <h1>相关新闻</h1>
      <div class="readMore">
        <a href="news.html">Read More</a>
      </div>
    </div>
    <div class="news-content lw">
      <div class="left item animate-down-move-up">
        <img class="animate-left-move-right" src="./images/new1.jpg" alt="">
        <h2 class="animate-left-move-right">2025-02-28</h2>
        <h1 class="animate-left-move-right">HOSHI SOLO曲DAMAGE
          5月26日17：00上线🔥</h1>
        <p class="animate-left-move-right">🔥权顺荣个人solo曲［Damage］将于5月26日北京时间17点公开，大家可以提前将歌单准备好，在音源公布后再加入即可。</p>
      </div>
      <div class="right animate-down-move-up">
        <div class="item ">
          <img class="animate-right-move-left" src="./images/new2.png" alt="">
          <h2 class="animate-right-move-left">2025-02-28</h2>
          <h1 class="animate-right-move-left">2024.7.16起担任 迪赛DIESEL 品牌大使
          </h1>
        </div>
        <div class="item">
          <img class="animate-right-move-left" src="./images/new3.jpg" alt="">
          <h2 class="animate-right-move-left">2025-02-28</h2>
          <h1 class="animate-right-move-left">宗家府Jongga 首位且唯一的宣传大使</h1>
        </div>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="footer">
    <div class="lw">
      <div class="footer-top">
        <img class="logo" src="./images/logo.png" alt="">
        <p>本网站上的所有文字、图片和其他内容均为 © xxxxx 版权所有，保留所有权利。</p>
      </div>
      <div class="footer-bottom">
        <div class="title">
          <h1>联系我们</h1>
          <a href="#" class="wxIcon">
            <i class="fa fa-weixin"></i>
          </a>
        </div>
        <div class="content">
          <p>地址: xx省 xx市 xxxxx地址</p>
          <p>邮政编码:123456</p>
          <p>传真号码:86-512-12345678</p>
          <p>联系电话:86-512-12345678</p>
          <p style="text-align: right;">©2025 xxxx 版权所有</p>
        </div>
      </div>
    </div>
  </footer>

  <!-- JavaScript -->
  <script src="./js/common.js"></script>
  <script>
    // 当页面加载完成后执行以下代码
    document.addEventListener('DOMContentLoaded', function () {
      // 初始化所有功能
      initAll()
      // 初始化轮播图
      var bannerSwiper = new Swiper('.bannerSwiper', {
        direction: 'horizontal', // 垂直切换选项
        loop: true, // 循环模式选项
        // autoplay: true, // 自动播放
      })
      var educationSwiper = new Swiper('.educationSwiper', {
        direction: 'horizontal', // 垂直切换选项
        slidesPerView: 'auto', // 显示的滑块数量
        centeredSlides: true, // 活动滑块居中
        spaceBetween: -150,
        loop: true, // 循环模式选项
        navigation: { // 导航按钮
          nextEl: ".educationSwiper-next",
          prevEl: ".educationSwiper-prev",
        },
        effect: "coverflow", // 效果
        coverflowEffect: { // 效果参数
          rotate: 20, //  旋转角度
          stretch: '85%', // 拉伸
          depth: 100, //  深度
          modifier: 1, //  效果的大小
          slideShadows: true, //  投影
        },
      })
    })
  </script>
</body>

</html>